<template>
  <div class="menubox">
    <div class="menuxbox">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#5BB7FF"
        text-color="#FFF"
        active-text-color="#FFF">
        <el-menu-item index="1">
          <router-link to='/'>首页</router-link>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">新闻资讯</template>
          <el-menu-item index="2-1">时事要闻</el-menu-item>
          <el-menu-item index="2-2">今日头条</el-menu-item>
          <el-menu-item index="2-3">社会新闻</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">党政建设</template>
          <el-menu-item index="3-1">党建新闻</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">健康生活</template>
          <el-menu-item index="4-1">生活趣事</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">专题报道</template>
          <el-menu-item index="5-1">疫情防控</el-menu-item>
          <el-menu-item index="5-2">新基建</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">信息公开</template>
          <el-menu-item index="6-1">国际交流</el-menu-item>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title">关于我们</template>
          <el-menu-item index="7-1">公司新闻</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
  created:function () {//创建实例之后获取

  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
};
</script>
<style lang="scss" scoped>
.menubox{
  width: 100%;
  border-top:1px solid #F0F0F0;
  background: #5BB7FF;
  .menuxbox{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
  }
}

</style>
<style>
.el-menu-demo{
  display: flex;
  justify-content: space-between;
}
.el-icon-arrow-down{
  display: none;
}
</style>